<template>
  <div>
    <el-icon @click="click">
      <component :is="isFullscreen ? Crop : FullScreen"></component>
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import screenfull from "screenfull";
import { ElMessage } from "element-plus";
import { onMounted, ref, onBeforeUnmount } from "vue";
import { FullScreen, Crop } from "@element-plus/icons-vue";

const isFullscreen = ref(false);

const change = () => {
  isFullscreen.value = screenfull.isFullscreen;
};

const init = () => {
  if (screenfull.isEnabled) {
    screenfull.on("change", change);
  }
};
onBeforeUnmount(() => {
  destroy();
});
const destroy = () => {
  if (screenfull.isEnabled) {
    screenfull.off("change", change);
  }
};
const click = () => {
  if (!screenfull.isEnabled) {
    ElMessage({
      message: "you browser can not work",
      type: "warning",
    });
    // return false;
  }
  screenfull.toggle();
};
onMounted(() => {
  init();
});
</script>
